<div class="make-inquiry-content">
  <!-- 车辆信息、查询条件 -->
  <div apes-col [apesMd]="6" class="left-inquiry">
    <!--车辆信息-->
    <div>
      <span>{{ inquiryInitData['enquiryID'] }}</span>
    </div>
    <div>
      <span>{{ inquiryInitData['CLXX'] }}</span>
    </div>

    <!--标签页-->
    <apes-tabset [apesType]="'card'" class="left-inquiry-tabSet"
                 [apesTabBarExtraContent]="extraTemplate" [apesTabBarGutter]="8">
      <apes-tab apesTitle="配件">
        <div class="left-inquiry-box">
          <div class="left-inquiry-area-title">
            <label apes-checkbox [(ngModel)]="selectAllCategoryName" (ngModelChange)="selectAll()">
              全选
            </label>
            <span class="right-sum">已选配件</span>
          </div>
        </div>
        <div class="left-inquiry-tab">
          <ng-container *ngFor="let field of filterField,let i = index">
            <ng-container *ngIf="i == 0">
              <div *ngFor="let list of field.data, let i = index" class="left-inquiry-box">
                <div class="left-inquiry-area-title">
                  <label apes-checkbox [(ngModel)]="list.checked" (ngModelChange)="checkFiltrationData()">
                    {{i + 1}}. {{list[field.type]}}
                  </label>
                  <span class="right-sum">
                    <apes-badge [apesCount]="checkSelectSum(list[field.type])"></apes-badge>
                  </span>
                </div>
              </div>
            </ng-container>
          </ng-container>
        </div>
      </apes-tab>
      <!--      [apesForceRender]="true"-->
      <apes-tab apesTitle="筛选">
        <div class="left-inquiry-tab">
          <div *ngFor="let field of filterField,let i = index" class="left-inquiry-filtration-box">
            <ng-container *ngIf="i != 0">
              <div class="filtration-box-title">{{field.name}}</div>
              <div *ngFor="let list of field.data, let i1 = index" class="left-inquiry-box">
                <div class="left-inquiry-area-title">
                  <label apes-checkbox [(ngModel)]="list.checked" (ngModelChange)="checkFiltrationData()">
                    <span>{{i1 + 1}}.</span>
                    <span *ngIf="field.type == 'supplier'">供应商：</span>
                    <span> {{list[field.type] == 999999 ? '赋能外采' : list[field.type]}}</span>
                  </label>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </apes-tab>
      <ng-template #extraTemplate>
        <button apes-button (click)="resetCondition()">重置</button>
      </ng-template>
    </apes-tabset>

  </div>

  <!-- 商品展示 -->
  <div apes-col [apesMd]="18">

    <div class="right-header">

      <div class="showHidden">
        <div class="showHidden-icon" (click)="openShowHidden()">
          <i *ngIf="!showHidden" apes-icon apesType="eye-invisible"></i>
          <i *ngIf="showHidden" apes-icon apesType="eye"></i>
        </div>
      </div>

    </div>

    <!-- 超出高度出现滚动条 -->
    <div class="right-inquiry">

      <apes-spin [apesSize]="'large'" *ngIf="isLoading" style="margin-top: 28vh;"></apes-spin>

      <ng-container *ngIf="!isLoading">
        <!-- 遍历 -->
        <ng-container *ngIf="inquiryShowData.length != 0">
          <div class="right-inquiry-main" *ngFor="let item of inquiryShowData, let i = index">

            <ng-container *ngIf="item['item'].length != 0">

              <!-- 配件名称 -->
              <div class="right-inquiry-title" id="{{item['categoryId']}}">
                <span class="first">{{i + 1}}</span>
                <span class="second">{{item['categoryName']}}</span>
                <ng-container *ngIf="item.hasOwnProperty('showBox')? item.showBox : true;">
                  <span class="third" (click)="item['showBox'] = false;">
                    收起报价
                    <i apes-icon apesType="up"></i>
                  </span>
                </ng-container>
                <ng-container *ngIf="item.hasOwnProperty('showBox')? !item.showBox : false;">
                  <span class="third" (click)="item['showBox'] = true;">
                    展开报价
                    <i apes-icon apesType="down"></i>
                  </span>
                </ng-container>

              </div>

              <!-- 对应单个商品 -->
              <div class="right-inquiry-box"
                   [ngClass]="{'none': item.hasOwnProperty('showBox')? !item.showBox : false}">
                <ng-container *ngFor="let list of item['item'];let i1 = index;">

                  <div apes-row class="right-inquiry-box-main">

                    <div apes-col [apesSpan]="22" class="main-col">

                      <div apes-row>
                        <!--商品名称-->
                        <div apes-col [apesSpan]="12" class="main-col text-nowrap">
                          [{{list.SPID}}] {{list.SPMC}}
                        </div>
                        <!--参考成本-->
                        <div apes-col [apesSpan]="4" class="main-col" *ngIf="!list.hasOwnProperty('operation')">
                          <ng-container *ngIf="showHidden">
                            参考成本：
                            <span
                              style="font-weight:bold;color: red">¥{{showHidden ? list.notTaxUnitPrice : '****'}}</span>
                          </ng-container>
                        </div>
                        <!--品牌-->
                        <div apes-col [apesSpan]="4" class="main-col">
                          <span>品牌：{{list.Brand}}</span>
                        </div>
                        <!--发货地-->
                        <div apes-col [apesSpan]="4" class="main-col">{{list.address}}</div>
                      </div>

                      <div apes-row>
                        <!--状态-->
                        <div apes-col [apesSpan]="2" class="main-col">{{list.state}}</div>
                        <!--配送方式-->
                        <div apes-col [apesSpan]="4" class="main-col col-fields">
                          <ng-select class="logisticsMode-select"
                                     [items]="list['logisticsModeItems']"
                                     bindLabel="name"
                                     (change)="logisticsModeChange($event,list)"
                                     (focus)="checkLogisticsMode(list)"
                                     [loading]="list['logisticsLoading']"
                                     [(ngModel)]="list['logisticsMode']"
                                     [disabled]="list.selectFlag != 0 || list.ssign != '00'"
                                     [searchable]="false"
                                     [notFoundText]="'暂无数据'">
                          </ng-select>
                        </div>
                        <!--配送时间-->
                        <div apes-col
                             [apesSpan]="6"
                             class="main-col"
                             style="white-space: pre-wrap;"
                             [innerHTML]="list.purchaseInformation"></div>
                        <!--建议售价-->
                        <div apes-col [apesSpan]="4" class="main-col">建议售价： ¥{{list.XSDJ}}</div>
                        <!--品质-->
                        <div apes-col [apesSpan]="4" class="main-col">
                          <span>品质：{{list.XFPZJC}}</span>
                          <span *ngIf="list.XFPZDY" apes-tooltip
                                apesTooltipTitle="{{list.XFPZDY}}" class="tip">
                            <i apes-icon apesType="exclamation-circle" class="tooltip-icon"></i>
                          </span>
                        </div>
                        <!--供应商-->
                        <div apes-col [apesSpan]="4" class="main-col">
                          {{list.supplier == 999999 ? '赋能外采' : list.supplier}}
                        </div>
                      </div>

                      <div apes-row>
                        <!--供应商备注-->
                        <ng-container *ngIf="list.note">
                          <div apes-col [apesSpan]="12" class="main-col text-nowrap"
                               apes-tooltip [apesTooltipTitle]="titleTemplate">供应商备注：{{list.note}}</div>
                          <ng-template #titleTemplate>
                            <span>{{list.note}}</span>
                          </ng-template>
                        </ng-container>
                        <ng-container *ngIf="!list.note">
                          <div apes-col [apesSpan]="12" class="main-col">供应商备注：--</div>
                        </ng-container>
                        <!--4S价格-->
                        <div *ngIf="list.fourSPrice"
                             apes-col
                             [apesSpan]="4"
                             class="main-col">
                          4S价格：
                          <span style="font-weight:bold;color: red">¥{{list.fourSPrice}}</span>
                        </div>
                        <!--质保期-->
                        <div apes-col [apesSpan]="4" *ngIf="list.hasOwnProperty('ZBQ')" class="main-col">
                          质保期： {{list.ZBQ}}个月
                        </div>
                        <!--图片-->
                        <div apes-col [apesSpan]="4" class="main-col" *ngIf="list.hasOwnProperty('png')">

                          <apes-badge [apesCount]="showBadges(list.png)" class="content-badge">
                            <div class="content-left-btn"
                                 (click)="showPhoto(list.png)">
                              <i apes-icon apesType="picture"></i>
                            </div>
                          </apes-badge>

                        </div>

                      </div>

                    </div>

                    <!--勾选标记-->
                    <div apes-col [apesSpan]="2" *ngIf="sign">
                      <div class="right-inquiry-btn" (click)="selectProduct(list,item)">
                        <img [src]="'./assets/tmp/img/theme/'+list['selectFlag']+'.svg'"
                             style="width: 40px;height: 40px;">
                      </div>
                    </div>
                  </div>


                </ng-container>
              </div>

            </ng-container>

          </div>
        </ng-container>

        <ng-container *ngIf="showInquiry">
          <apes-empty class="inquiry-content-empty"></apes-empty>
        </ng-container>

      </ng-container>
    </div>

    <div class="right-footer">
      <div>已选配件：{{total}}</div>
    </div>
  </div>


</div>
